<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 400px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* transform: translateX(100px); */
            /* transform: translateY(100px); */
            /* 这种用空格隔开 */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            transform: translate3d(100px, 100px, 100px);
        }
    </style>
</head>
<body>
    <!-- 
        我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

        有什么特点
            
            1.近大远小。
            2.物体后面遮挡不可见

        当我们在网页上构建3D效果的时候参考这些特凉就能产出3D效果。

        6.1三维坐标系

            三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
            
            x轴:水平向右  注意:×右边是正值，左边是负值
            
            y轴∶垂直向下  注意: y下面是正值，上面是负值
            
            z轴∶垂直屏幕  注意∶往外面是正值，往里面是负值


        3D转换我们主要学习工作中最常用的3D位移和3D旋转

        主要知识点

        1.3D位移: translate3d(xy,z)
        2.3D旋转: rotate3d(xy,z)
        3.透视: perspective
        4.3D呈现transfrom-style

     -->

     <!-- 
        6.2 3D移动translate3d

        3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

        translform:translateX(100px)∶仅仅是在x轴上移动
        translform:translateY(100px)∶仅仅是在Y轴上移动
        translform:translateZ(100px)︰仅仅是在Z轴上移动（注意: translateZ一般用px单位,而不会用50%这种%单位)
        transform:translate3d(x,y,z)∶其中x、y、z分别指要移动的轴的方向的距离

      -->
      <div></div>


      <!-- 
        6.3透视perspective

        在2D平面产生近大远小视觉立体，但是只是效果二维的

        如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内)
        模拟人类的视觉位置，可认为安排一只眼睛去看
        透视我们也称为视距︰视距就是人的眼睛到屏幕的距离
        距离视觉点越近的在电脑平面成像越大，越远成像越小
        透视的单位是像素


        透视写在被观察元素的父盒子上面的

        d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
        z∶就是z轴，物体距离屏幕的距离，z轴越大(正值）说明物体在远离屏幕，向眼睛移动，我们看到的物体就越大。


       -->
</body>
</html>